<template>
  <div class="inspection-detail">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="巡检记录"
        left-arrow
        @click-left="onClickLeft"
    />

    <!-- 基本信息 -->
    <van-cell-group title="基本信息">
      <van-cell title="计划名称" value="空调巡检" />
      <van-cell title="计划类型" value="智能巡检" />
      <van-cell title="开始时间" value="8:00" />
      <van-cell title="完成时间" value="10:00" />
      <van-cell title="覆盖率" value="100%" />
      <van-cell>
        <template #title>
          <span>设备数量: </span>
          <span style="margin-right: 20px;">20</span>
          <span>异常设备数量: </span>
          <span class="error-text">2</span>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 巡检点位 -->
    <van-cell-group title="巡检点位">
      <van-cell v-for="item in inspectionPoints" :key="item.id">
        <template #title>
          <div class="point-row">
            <span>{{ item.name }}</span>
            <span>{{ item.code }}</span>
            <span>{{ item.location }}</span>
            <span class="error-text">{{ item.status }}</span>
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 底部按钮 -->
    <div class="bottom-button">
      <van-button type="primary" block>返回</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XunjianjiluZView',
  data() {
    return {
      inspectionPoints: [
        {
          id: 1,
          name: '电梯01',
          code: 'DE123BQ',
          location: 'B区4#1F',
          status: '异常'
        },
        {
          id: 2,
          name: '监控01',
          code: 'DE341BQ',
          location: 'B区2#10F',
          status: '异常'
        }
      ]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.inspection-detail {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 60px;
}

.point-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.error-text {
  color: #ff4d4f;
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: #fff;
}
</style>